<!-- 编辑器的左侧菜单 -->
<template>
  <div class="Component-list pt30">
    <p class="fz18 z3 pd mb10">分区控件<span class="fz12 z9">(点击展示控件)</span></p>
    <div class="pd jhjxertwe">
      <div
        class="jjnjjhjhwe cen"
        :class="item.cls"
        v-for="(item, idx) in PartitionControl"
        :key="idx"
        @click="controlFun(item)"
      >
      <n-tooltip trigger="hover">
    <template #trigger>
    <div>
      <span class="pr"> {{ item.name }} </span>
        <img src="../../../assets/img/xz.jpg" class="xuanhhgertw" />
    </div>
    </template>
    {{item.Tooltip}}
  </n-tooltip>
        
      </div>
    </div>

    <p class="fz18 z3 pd mb10 mt20">内容控件<span class="fz12 z9">(拖拽到分区控件里)</span></p>
    <draggable
      class="editor-side-menu"
      v-model="list1"
      :clone="cloneDog"
      :group="{ name: 'people', pull: 'clone', put: false }"
    >
      <template #item="{ element }">
        <div class="cen sz">
          <p>
            <span class="dfsdfereerw">
              <i
                class="iconfont z9"
                :class="[element.icon, element.iconSize]"
              ></i>
            </span>
          </p>
          <p>{{ element.name }}</p>
        </div>
      </template>
    </draggable>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import draggable from "vuedraggable";

const emit = defineEmits(["getxz"]);
const PartitionControl = ref([
  {
    name: "标题栏",
    type: 0,
    initH:100,
    Tooltip:"只显示一次，只在第一页的最上面显示，其他页面不显示",
    cls: "act",
    initData:[]
  },
  {
    name: "页头栏",
    type: 1,
    initH:100,
    Tooltip:"每页头部都显示",
    cls: "",
    initData:[]
  },
  {
    name: "正文栏",
    type: 2,
    initH:300,
    Tooltip:"每页都显示，内容一直延续,自动分页",
    cls: "act",
    initData:[]
  },
  {
    name: "页尾栏",
    type: 3,
    initH:150,
    Tooltip:"每页的底部都显示",
    cls: "",
    initData:[]
  },
  {
    name: "总结栏",
    type: 4,
    initH:150,
    Tooltip:"最后一页显示",
    cls: "",
    initData:[]
  },
]);
const list1 = [
  {
    name: "标签",
    typeid: 0,
    icon: "dx-24gl-fontSize",
    val: "",
    iconSize: "fz18",
  },
  {
    name: "文本",
    typeid: 1,
    icon: "dx-wenbenbianji",
    val: "",
    iconSize: "fz18",
  },
  {
    name: "图片",
    typeid: 2,
    icon: "dx-24gl-pictures",
    val: "",
    iconSize: "fz18",
  },
  {
    name: "复选框",
    typeid: 4,
    icon: "dx-pin",
    val: "",
    iconSize: "fz18",
  },
  {
    name: "单选框",
    typeid: 5,
    icon: "dx-pin",
    val: "",
    iconSize: "fz18",
  },
  // { name: "轮播图", typeid: 3, icon: "dx-lunbotu", val: "", iconSize: "fz22" },
];
const cloneDog = (data, $event) => {
  const fj = JSON.parse(JSON.stringify(data));
  let obj = {
    ...fj,
    x: 0,
    y: 0,
    addTime: new Date().getTime(),
  };
  if (fj.typeid == 0) {
    obj.val = "标签";
    obj.fontSize = 16;
    obj.lineHeight = 16;
    obj.isBlod = false;
    obj.w = 100;
    obj.colorVal = "#000";
  }
  if (fj.typeid == 1) {
    obj.fontSize = 16;
    obj.lineHeight = 16;
    obj.isBlod = false;
    obj.w = 200;
    obj.colorVal = "#000";
    obj.h = 30;
    obj.border = ['2']
    obj.backgroundColor = "#FFF";
    obj.textType = 0
  }
  if (fj.typeid == 2) {
    obj.imgXsVal = "cover";
    obj.w = 100;
    obj.h = 100;
    obj.imgType = 0
  }
  if (fj.typeid == 3) {
    obj.imgXsVal = "cover";
    obj.w = 1200;
    obj.h = 400;
  }
  if (fj.typeid == 4||fj.typeid == 5) {
    obj.w = 300;
    obj.h = 20;
    obj.option ='选项1,选项2'
  }
  return obj;
};

const controlFun = (data) => {
  if (data.cls) {
    data.cls = "";
  } else {
    data.cls = "act";
  }
  emit("getxz",PartitionControl.value.filter(a=>a.cls=='act'))
};
emit("getxz",PartitionControl.value.filter(a=>a.cls=='act'))
defineExpose({
  setData(data) {
    PartitionControl.value.map(a=>{
      data.map(b=>{
        if(a.type == b.type){
          a.cls = b.cls
          a.initData = b.initData
          a.initH = b.initH
        }
      })
    })
  }
})
</script>
<style scoped>
.jhjxertwe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.jjnjjhjhwe {
  border: 1px solid #e0e0e0;
  line-height: 40px;
  position: relative;
  border-radius: 4px;
  cursor: pointer;
}
.xuanhhgertw {
  width: 24px;
  position: absolute;
  right: 0;
  bottom: 0;
  display: none;
}
.jjnjjhjhwe.act {
  border: 1px solid #d91d06;
  color: #d91d06;
}
.jjnjjhjhwe.act .xuanhhgertw {
  display: block;
}
.Component-list {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.1);
}
.dfsdfereerw {
  border: 1px solid #e0e0e0;
  width: 60px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  margin-bottom: 5px;
}
.dfsdfereerw.ab {
  height: 60px;
}
</style>
